<template>
	<div class="decorate">
		<!-- 顶部边框 -->
		<div class="topBorder">
			<span v-for="(span,key) in spans" class="mr" :class="span" :key="key"></span>
		</div>
		<!-- 标题 -->
		<h1>{{i18n.title[lan]}}</h1>
		<p v-if="!true">123</p>
		<template v-for="(view,k1) in views">
			<div class="view" :class="view.class">
				<template v-for="(vs,k1) in view.view">
					<template v-for="(v,k2) in vs">
						<em v-if="v=='em'"></em>
						<b class="c" v-else-if="v=='b'"></b>
						<div class="clear" v-else-if="v=='div'"></div>
						<p v-else></p>
					</template>
				</template>
			</div>
		</template>
	</div>
</template>

<script>
	import constVal from '../unit/const.js';
	export default {
		name: 'Decorate',
		data() {
			return {
				i18n: constVal.i18n,
				lan: constVal.lan,
				spans: "lllllrrrrr".split("").map((s, i) => (i == 0 || i == 5) ? s + " w40" : s),
				views: [{
					class: "",
					view: [
						["b", "div", "b", "b", "div", "em", "b", "p"],
						["em", "b", "div", "b", "b", "div", "em", "b", "p"],
						["b", "b", "b", "b", "p"],
						["b", "div", "b", "b", "div", "b", "p"],
						["b", "b", "div", "b", "div", "b", "p"],
						["em", "b", "div", "em", "b", "div", "em", "b", "div", "em", "b"]
					],
				}, {
					class: "l",
					view: [
						["em", "b", "div", "b", "b", "div", "b", "p"],
						["b", "div", "b", "b", "div", "b", "p"],
						["b", "b", "b", "b", "p"],
						["em", "b", "div", "b", "b", "div", "em", "b", "p"],
						["b", "b", "div", "em", "b", "div", "em", "b", "p"],
						["b", "div", "b", "div", "b", "div", "b"]
					]
				}]
			};
		}
	}
</script>

<style lang="less" scoped>
	.decorate {
		h1 {
			position: absolute;
			width: 100%;
			text-align: center;
			font-weight: normal;
			top: -12px;
			left: 0;
			margin: 0;
			padding: 0;
			font-size: 30px;
		}

		.topBorder {
			position: absolute;
			height: 10px;
			width: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			overflow: hidden;

			span {
				display: block;
				width: 10px;
				height: 10px;
				overflow: hidden;
				background: #000;

				&.mr {
					margin-right: 10px;
				}

				&.ml {
					margin-left: 10px;
				}

				&.w40 {
					width: 40px;
				}
			}
		}

		.view {
			position: absolute;
			right: -70px;
			top: 20px;
			width: 44px;

			em {
				display: block;
				width: 22px;
				height: 22px;
				overflow: hidden;
				float: left;
			}

			p {
				height: 22px;
				clear: both;
			}

			&.l {
				right: auto;
				left: -70px;
			}
		}
	}
</style>
